<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input id="num1" type="text" placeholder="请输入一个数字">
    <span>-</span>
    <input id="num2" type="text" placeholder="请输入一个数字">
    <button id="btn">计算</button>
    <input id="res" type="text" placeholder="显示结果">

    <script>

        // 1 首先获取所有相关的对象
        // 2 绑定事件
        //    逻辑计算


        var oNum1 = document.getElementById('num1') ;
        var oNum2 = document.getElementById('num2') ;
        var oBtn = document.getElementById('btn') ;
        var oRes = document.getElementById('res') ;

        console.log(oNum1 , oNum2 , oRes , oBtn) ;

        // 绑定事件
        oBtn.onclick = function() {
            // alert(555) ;
            // 获取输入框的值 
            var n1 = oNum1.value ;
            var n2 = oNum2.value ;
            console.log(n1 , n2) ;
            var n3 = n1 - n2 ;
            // 把值存入框中
            oRes.value = n3 ;
        }


    </script>
    
</body>
</html>